@controls-width: 130px;

.patch-save {

    .form-control {
        margin-right: -30px;
        opacity: 0;
        transition: opacity .2s cubic-bezier(0, 0.5, 0.5, 1), margin .2s cubic-bezier(0, 0.5, 0.5, 0.99);
    }

    &.active .form-control {
        opacity: 1;
        margin-right: 0px;
    }

    &.has-error {
        padding-bottom: 0;

        input {
            &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
                color: @brand-danger-dark;
            }

            &::-moz-placeholder { /* Firefox 19+ */
                color: @brand-danger-dark;
            }

            &:-ms-input-placeholder { /* IE 10+ */
                color: @brand-danger-dark;
            }

            &:-moz-placeholder { /* Firefox 18- */
                color: @brand-danger-dark;
            }
        }
    }
}

.patch-filter {
    width: 100% !important;
}

.loadpatch {
    @media (max-width:@screen-xs-max) {
        display: block !important;
    }

    .dropdown-menu {
        padding: 0;
    }

    .loadpatch-dropdown {
        width: 100%;
        height: 500px;
        max-width: calc(100vw ~"-" @grid-gutter-width/3*4);
        height: 40vh;
        overflow-x: hidden;
        overflow-y: auto;

        @media (min-width:@screen-sm) {
            width: 1000px;
        }

        @media (min-width:@screen-md) {
            max-width: calc(100vw ~"-" @grid-gutter-width/3*7);
        }

        .loadpatch-container {
            display: flex;
            align-items: stretch;
        }

        .flex-footer {
            margin: 0;
            padding: 0 @grid-gutter-width/4 @grid-gutter-width/4;
        }

        .patch-preview-container, .patch-list-container {
            flex-grow: 1;
            flex-shrink: 0;
            padding: @grid-gutter-width/2;
            position: relative;
            background-color: @panel-bg;
        }

        .patch-list-container {
            z-index: 2;
            width: 100%;

            @media (min-width:@screen-sm) {
                width: 50%;
            }
        }


        .patch-preview-container {
            width: 50%;
            display: flex;
            flex-direction: column;
            z-index: 1;
            transform: translateX(100%);
            transition: transform .2s cubic-bezier(0, 0, 0, 1);

            @media (max-width:@screen-xs-max) {
                display: none;
            }

            .pre-container {
                flex-grow: 1;
                background-color: @well-bg;
                overflow: auto;
            }

            pre {
                overflow: auto;
                background-color: @well-bg !important;
            }
        }

        &.show-preview {
            .patch-preview-container {
                transform: translateX(0%);
            }
        }


        .patch-list {
            .absolute-fill;
            overflow-y: auto;
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: @well-bg;

            li {
                display: flex;
                align-items: center;
                padding: @grid-gutter-width/6 0;
                border-bottom: 1px solid @panel-bg;

                &:hover {
                    background-color: lighten(@well-bg,3%);
                }

                &.selected {
                    background-color: @brand-primary;
                    a, a .modified {
                        color: @gray-lighter !important;
                    }
                }
            }

            a {
                display: block;
                padding: 2px 10px;

                &.patch-link {
                    display: flex;
                    flex-grow: 1;
                    align-items: center;
                }

                .name {
                    flex-grow: 1;
                    font-weight: bold;
                    word-break: break-all;
                    margin-right: @grid-gutter-width/2;
                }

                .modified {
                    font-size: 11px;
                    position: relative;
                    top: -1px;
                    .text-muted;
                }
            }
        }
    }
}

.patch-settings {
    width: @controls-width;
}

#test-container {
    #preview {
        pre {
            height: 40vh;
        }
    }   
    
    .tab-content {
        //max-height: 40vh;
    }
    
    .tab-data {
        color: @text-emphasis;
    }
}

.patch-container {
    position: relative;
    display: flex;
    
    .patch-main {
        width: 100%;
        .help-block {
            margin-bottom:0 !important;
        }
    }

    .patch-controls, .query-controls, .test-controls {
        margin-left: @line-height-computed/2;
        flex-basis: @controls-width;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;

        .flex-separator {
            flex-grow: 100;
        }

        .statistics, .test-close {
            align-self: flex-end;
        }
    }

    .test-controls {
        display: none;
    }

    .test-container {
        display: none;
        .slidein-style;
        padding: @grid-gutter-width/2;
        background-color: @gray-darker;
        width: 100%;
        position: absolute;
        top: 100%;
        margin-top: @grid-gutter-width/2;
    }
}



.results-info {
    small::after {
        content: " and";
    }

    small:last-child:after {
        content: "";
    }
}

.patch-results {
    border: 1px solid @gray-darker;

    tbody {
        overflow-y: auto;
    }

    td, th {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    th {
        &:hover {
            background-color: @gray-darker;
            cursor: pointer;

            span {
                text-decoration: underline;
            }
        }
    }
}

.patch {
    .patch-table-container {
        margin-top: -30px;
    }
    
    .input-border {
        border: 1px solid @gray-darker;
    }

    #operationsPerSecond {
        width: 50%;
    }
}

#patch-target {
    .virtual-grid {
        .cell {
            &.action-cell {
                text-align: center;

                .btn {
                    font-size: 20px;
                }
            }
        }
    }
}

#patchSyntaxDialog {
    code {
        color: @code-color;
    }

    width: 1280px;
}
